import React, { useState, useEffect } from 'react';
import useLocalStorage from '../hooks/useLocalStorage';
import useWindowSize from '../hooks/useWindowSize';
import useDebounce from '../hooks/useDebounce';

/**
 * 自定义Hooks示例组件
 * 
 * 这个组件展示了如何使用我们创建的自定义Hooks：
 * 1. useLocalStorage - 将状态持久化到localStorage
 * 2. useWindowSize - 获取并监听窗口大小变化
 * 3. useDebounce - 对频繁变化的值进行防抖处理
 */
function CustomHooksExample() {
  // 使用useLocalStorage保存表单数据
  const [formData, setFormData] = useLocalStorage('form-data', {
    name: '',
    email: '',
    theme: 'light'
  });
  
  // 使用useWindowSize获取窗口大小
  const { width, height } = useWindowSize();
  
  // 普通的React状态用于搜索输入
  const [searchTerm, setSearchTerm] = useState('');
  
  // 使用useDebounce对搜索词进行防抖处理
  const debouncedSearchTerm = useDebounce(searchTerm, 500);
  
  // 模拟搜索结果状态
  const [searchResults, setSearchResults] = useState([]);
  const [isSearching, setIsSearching] = useState(false);
  
  // 处理表单输入变化
  const handleFormChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };
  
  // 处理主题切换
  const toggleTheme = () => {
    setFormData({
      ...formData,
      theme: formData.theme === 'light' ? 'dark' : 'light'
    });
  };
  
  // 处理搜索输入变化
  const handleSearchChange = (e) => {
    setSearchTerm(e.target.value);
  };
  
  // 当防抖后的搜索词变化时执行搜索
  useEffect(() => {
    // 如果搜索词为空，不执行搜索
    if (!debouncedSearchTerm) {
      setSearchResults([]);
      return;
    }
    
    // 模拟API搜索
    const performSearch = async () => {
      setIsSearching(true);
      
      // 模拟API延迟
      await new Promise(resolve => setTimeout(resolve, 800));
      
      // 模拟搜索结果
      const results = [
        `结果 1 包含 "${debouncedSearchTerm}"`,
        `结果 2 关于 "${debouncedSearchTerm}"`,
        `"${debouncedSearchTerm}" 的另一个结果`,
        `与 "${debouncedSearchTerm}" 相关的项目`
      ];
      
      setSearchResults(results);
      setIsSearching(false);
    };
    
    performSearch();
  }, [debouncedSearchTerm]);
  
  // 根据保存的主题设置样式
  const themeStyle = {
    backgroundColor: formData.theme === 'light' ? '#ffffff' : '#333333',
    color: formData.theme === 'light' ? '#333333' : '#ffffff',
    padding: '20px',
    borderRadius: '8px',
    transition: 'all 0.3s ease'
  };
  
  return (
    <div className="hook-example" style={themeStyle}>
      <h2>自定义 Hooks 示例</h2>
      
      <section>
        <h3>1. useLocalStorage Hook</h3>
        <div className="local-storage-example">
          <form>
            <div className="form-group">
              <label>姓名:</label>
              <input
                type="text"
                name="name"
                value={formData.name}
                onChange={handleFormChange}
                placeholder="输入你的姓名"
              />
            </div>
            
            <div className="form-group">
              <label>电子邮件:</label>
              <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleFormChange}
                placeholder="输入你的电子邮件"
              />
            </div>
            
            <div className="form-group">
              <button type="button" onClick={toggleTheme}>
                切换到{formData.theme === 'light' ? '深色' : '浅色'}主题
              </button>
            </div>
          </form>
          
          <div className="storage-info">
            <h4>localStorage 中保存的数据:</h4>
            <pre>{JSON.stringify(formData, null, 2)}</pre>
            <p className="note">
              刷新页面后，表单数据会从localStorage中恢复。
              尝试修改表单值，然后刷新页面查看效果。
            </p>
          </div>
        </div>
      </section>
      
      <section>
        <h3>2. useWindowSize Hook</h3>
        <div className="window-size-example">
          <div className="size-display">
            <p>当前窗口宽度: <strong>{width}px</strong></p>
            <p>当前窗口高度: <strong>{height}px</strong></p>
          </div>
          
          <div className="responsive-demo">
            <h4>响应式演示:</h4>
            {width < 600 ? (
              <p>在小屏幕上显示的内容 (宽度 &lt; 600px)</p>
            ) : width < 1024 ? (
              <p>在中等屏幕上显示的内容 (600px - 1024px)</p>
            ) : (
              <p>在大屏幕上显示的内容 (宽度 &gt; 1024px)</p>
            )}
            
            <div 
              className="responsive-box"
              style={{
                width: `${Math.min(width * 0.8, 500)}px`,
                height: '100px',
                backgroundColor: width < 600 ? 'coral' : width < 1024 ? 'lightblue' : 'lightgreen',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: '8px',
                transition: 'all 0.3s ease'
              }}
            >
              调整浏览器窗口大小来查看变化
            </div>
            
            <p className="note">
              这个示例使用useWindowSize hook实时监测窗口大小，
              并根据不同的断点显示不同的内容和样式。
            </p>
          </div>
        </div>
      </section>
      
      <section>
        <h3>3. useDebounce Hook</h3>
        <div className="debounce-example">
          <div className="search-container">
            <input
              type="text"
              value={searchTerm}
              onChange={handleSearchChange}
              placeholder="输入搜索词 (会有500ms防抖)"
              style={{ width: '100%', padding: '8px' }}
            />
            
            <div className="search-info">
              <p>当前输入: <strong>{searchTerm}</strong></p>
              <p>防抖后的值: <strong>{debouncedSearchTerm}</strong></p>
              <p className="note">
                只有当你停止输入500ms后，才会使用防抖后的值执行搜索
              </p>
            </div>
          </div>
          
          <div className="search-results">
            <h4>搜索结果:</h4>
            {isSearching ? (
              <p>搜索中...</p>
            ) : searchResults.length > 0 ? (
              <ul>
                {searchResults.map((result, index) => (
                  <li key={index}>{result}</li>
                ))}
              </ul>
            ) : debouncedSearchTerm ? (
              <p>没有找到结果</p>
            ) : (
              <p>请输入搜索词</p>
            )}
          </div>
        </div>
      </section>
      
      <div className="explanation">
        <h3>自定义 Hooks 说明:</h3>
        <ul>
          <li>自定义Hooks是一种复用状态逻辑的方式，而不是复用状态本身</li>
          <li>自定义Hooks必须以"use"开头命名，这是React的约定</li>
          <li>自定义Hooks可以调用其他Hooks，包括内置Hooks和其他自定义Hooks</li>
          <li>每次调用自定义Hook都会获得独立的状态</li>
          <li>自定义Hooks让我们可以将组件逻辑提取到可重用的函数中</li>
          <li>常见的自定义Hook用例:
            <ul>
              <li>表单处理 (useForm)</li>
              <li>数据获取 (useFetch)</li>
              <li>订阅外部数据源 (useSubscription)</li>
              <li>动画 (useAnimation)</li>
              <li>媒体查询 (useMediaQuery)</li>
              <li>本地存储 (useLocalStorage)</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default CustomHooksExample;